<!--
 *
 * @author 凡墙<jihaoju@qq.com>
 * @date 2019/11/12
 * @description
 -->
<template>
  <section>
    <!--订阅模板消息-->
<!--    <div class="pt10 pb10 font-common flex flex-row flex-center sub-msg-wrapper" v-if="isWxServiceEnable && subMsgWrapperVisible">-->
<!--      <div class="flex flex-row flex-center mr5">有与您匹配的有缘人注册时给您发送消息</div>-->
<!--      <div class="flex flex-row flex-center">-->
<!--        <div>-->
<!--          <wx-open-subscribe :template="subMsgTemplates"-->
<!--                             id="subscribe-btn"-->
<!--                             @success="subBtnSuccess"-->
<!--                             @error="subBtnError">-->
<!--            <script type="text/wxtag-template" slot="style">-->
<!--              <style>-->
<!--                .subscribe-btn {-->
<!--                  color: #fff;-->
<!--                  background-color: #07c160;-->
<!--                  padding: 5px 5px;-->
<!--                  border: none;-->
<!--                  border-radius: 4px;-->
<!--                }-->
<!--              </style>-->
<!--            </script>-->
<!--            <script type="text/wxtag-template">-->
<!--              <button class="subscribe-btn">订阅通知</button>-->
<!--            </script>-->
<!--          </wx-open-subscribe>-->
<!--        </div>-->
<!--      </div>-->
<!--    </div>-->

    <van-sticky>
      <div class="sticky-wrapper">
        <div class="flex row nav-wrapper">
          <div class="flex flex-1 flex-row flex-bottom pl20">
            <a class="current mr20 white">缘分</a>
            <a class="white" @click="$router.push({name: 'MemberRecommend'})">推荐</a>
          </div>

          <div class="flex flex-row flex-center flex-right pr20" @click="searchFormPopupVisible=true">
            <a class="">筛选</a>
            <i class="iconfont icon-shaixuan" />
          </div>
        </div>

        <div class="flex flex-row flex-center bg-color-white pt10 pb10 search-options">
          <div class="flex flex-row flex-center flex-1" @click="showOrderActionsheet=true">
            {{orderStr}}
            <i class="iconfont icon-xiangxia" />
          </div>

          <div class="flex flex-row flex-center flex-1" @click="showAgeActionsheet=true">
            {{ageStr}}
            <i class="iconfont icon-xiangxia" />
          </div>

          <div class="flex flex-row flex-center flex-1" @click="onShowRegionPopup()">
            <i class="iconfont icon-location" />
            {{locationStr}}
          </div>
        </div>
      </div>
    </van-sticky>

    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="requestData">
      <div class="member-list">
        <router-link
          :to="{ name: 'MemberProfile', query: { id: item.member.id }}"
          v-for="(item, index) in dataList"
          :key="index">
          <dl class="member-item">
            <dt class="member-photo">
              <img :src="item.member.photo_url ? item.member.photo_url : STATIC_BASE_URL + '/images/mp/gender.png'" />
              <h3>{{item.user.nick}}</h3>
            </dt>
            <dd class="member-info">
              <p class="text-center"><span v-if="item.member.birthday>0">{{item.member.age}}岁</span><span v-if="item.member.live_city_str"> · {{item.member.live_city_str}}</span><span v-if="item.member.height>0"> · {{item.member.height}}cm</span></p>
              <p class="text-center" v-if="item.member.house_status>0 || item.member.car_status>0 || item.member.job>0"><span v-if="item.member.house_status==20" class="mr5">有房</span><span v-if="item.member.car_status==20" class="mr5">有车</span><span v-if="item.member.job>0" class="mr5">{{item.member.job_str}}</span></p>
            </dd>
          </dl>
        </router-link>
      </div>
    </van-list>

    <van-action-sheet v-model="showOrderActionsheet" :actions="orderActions" @select="onOrderActionSelect" />
    <van-action-sheet v-model="showAgeActionsheet" :actions="ageActions" @select="onAgeActionSelect" />

    <van-popup v-model="showRegionPopup" round position="bottom">
      <van-cascader
        v-model="selectedRegions"
        title="请选择所在地区"
        :options="provinceList"
        @close="showRegionPopup = false"
        @change="onRegionCascaderChange"
        @finish="onRegionCascaderFinish"
      />
    </van-popup>

    <van-action-sheet
      v-model="jobsSheetVisible"
      :actions="jobsActions"
      cancel-text="取消"
      description="职业"
      close-on-click-action
      @select="onJobActionsSelect"
    />

    <div class="search-form-popup" v-if="searchFormPopupVisible">
      <div class="flex flex-col bg-color-white font-common search-form-box">
        <div class="flex flex-col flex-1 pd10" style="overflow-x: hidden; overflow-y: auto; padding-bottom: 40px;">
          <div class="flex flex-row flex-left search-form-field-header">关键词</div>
          <div class="w100 pb5 border-bottom-gray">
            <input type="text" v-model="searchForm.keywords" placeholder="输入用户昵称" class="search-input" />
          </div>

          <div class="flex flex-row flex-left search-form-field-header">性别</div>
          <div class="flex flex-row flex-left pb5 border-bottom-gray">
            <van-radio-group v-model="searchForm.gender" direction="horizontal">
              <span class="md5"><van-radio :name="0">不限</van-radio></span>
              <span class="md5"><van-radio :name="1">男</van-radio></span>
              <span class="md5"><van-radio :name="2">女</van-radio></span>
            </van-radio-group>
          </div>

          <div class="flex flex-row flex-left search-form-field-header">年龄</div>
          <div class="flex flex-row flex-left pb5 mb5 border-bottom-gray">
            <van-radio-group v-model="searchForm.age" direction="horizontal">
              <span class="md5" v-for="(item, index) in ageActions" :key="index">
                <van-radio :name="index">{{item.name}}</van-radio>
              </span>
            </van-radio-group>
          </div>

          <div class="flex flex-row flex-left search-form-field-header">身高</div>
          <div class="flex flex-row flex-left pb5 mb5 border-bottom-gray">
            <van-radio-group v-model="searchForm.height" direction="horizontal">
              <span class="md5" v-for="(item, index) in heightActions" :key="index">
                <van-radio :name="index">{{item.name}}</van-radio>
              </span>
            </van-radio-group>
          </div>

          <div class="flex flex-row flex-left search-form-field-header">体重</div>
          <div class="flex flex-row flex-left pb5 mb5 border-bottom-gray">
            <van-radio-group v-model="searchForm.weight" direction="horizontal">
              <span class="md5" v-for="(item, index) in weightActions" :key="index">
                <van-radio :name="index">{{item.name}}</van-radio>
              </span>
            </van-radio-group>
          </div>

          <div class="flex flex-row flex-left search-form-field-header">婚况</div>
          <div class="flex flex-row flex-left pb5 mb5 border-bottom-gray">
            <van-radio-group v-model="searchForm.marriage_status" direction="horizontal">
              <span class="md5" v-for="(item, index) in marriageStatusActions" :key="index">
                <van-radio :name="item.value">{{item.name}}</van-radio>
              </span>
            </van-radio-group>
          </div>

          <div class="flex flex-row flex-left search-form-field-header">学历</div>
          <div class="flex flex-row flex-left pb5 mb5 border-bottom-gray">
            <van-radio-group v-model="searchForm.education" direction="horizontal">
              <span class="md5" v-for="(item, index) in educationTypesActions" :key="index">
                <van-radio :name="item.value">{{item.name}}</van-radio>
              </span>
            </van-radio-group>
          </div>

          <div class="w100">
            <van-cell title="所在地" :value="searchForm.liveLocation" is-link @click="onShowRegionPopup('form')"/>
          </div>

          <div class="flex flex-row flex-left search-form-field-header">年收入</div>
          <div class="flex flex-row flex-left pb5 mb5 border-bottom-gray">
            <van-radio-group v-model="searchForm.annual_income" direction="horizontal">
              <span class="md5" v-for="(item, index) in incomesActions" :key="index">
                <van-radio :name="item.value">{{item.name}}</van-radio>
              </span>
            </van-radio-group>
          </div>

          <div class="flex flex-row flex-left search-form-field-header">生肖</div>
          <div class="flex flex-row flex-left pb5 mb5 border-bottom-gray">
            <van-radio-group v-model="searchForm.zodiac" direction="horizontal">
              <span class="md5" v-for="(item, index) in zodiacActions" :key="index">
                <van-radio :name="item.value">{{item.name}}</van-radio>
              </span>
            </van-radio-group>
          </div>

          <div class="flex flex-row flex-left search-form-field-header">星座</div>
          <div class="flex flex-row flex-left pb5 mb5 border-bottom-gray">
            <van-radio-group v-model="searchForm.constellation" direction="horizontal">
              <span class="md5" v-for="(item, index) in constellationActions" :key="index">
                <van-radio :name="item.value">{{item.name}}</van-radio>
              </span>
            </van-radio-group>
          </div>

          <div class="w100">
            <van-cell title="职业" :value="searchForm.job_str" is-link @click="jobsSheetVisible=true"/>
          </div>

          <div class="flex flex-row flex-left search-form-field-header">购房情况</div>
          <div class="flex flex-row flex-left pb5 mb5 border-bottom-gray">
            <van-radio-group v-model="searchForm.house_status" direction="horizontal">
              <span class="md5" v-for="(item, index) in houseStatusActions" :key="index">
                <van-radio :name="item.value">{{item.name}}</van-radio>
              </span>
            </van-radio-group>
          </div>

          <div class="flex flex-row flex-left search-form-field-header">购车情况</div>
          <div class="flex flex-row flex-left pb5 mb5 border-bottom-gray">
            <van-radio-group v-model="searchForm.car_status" direction="horizontal">
              <span class="md5" v-for="(item, index) in carStatusActions" :key="index">
                <van-radio :name="item.value">{{item.name}}</van-radio>
              </span>
            </van-radio-group>
          </div>

          <div class="flex flex-row flex-left search-form-field-header">生育情况</div>
          <div class="flex flex-row flex-left pb5 mb5 border-bottom-gray">
            <van-radio-group v-model="searchForm.kids" direction="horizontal">
              <span class="md5" v-for="(item, index) in kidsActions" :key="index">
                <van-radio :name="item.value">{{item.name}}</van-radio>
              </span>
            </van-radio-group>
          </div>
        </div>

        <div class="flex flex-row pd10 border-top-gray">
          <div class="flex flex-row flex-right flex-1 pr5">
            <van-button round block type="default" @click="resetSearchForm">重置</van-button>
          </div>
          <div class="flex flex-row flex-left flex-1 pl5">
            <van-button round block type="primary" @click="search">确定</van-button>
          </div>
        </div>
      </div>
    </div>

    <Tabbar active="home"/>
  </section>
</template>
<script>
  import Vue from 'vue';
  import {Toast, Row, Col, Cell, Icon, Sticky, ActionSheet, List, Cascader, Popup, Dialog, Overlay, CellGroup, Radio, RadioGroup, Button} from 'vant';

  Vue.use(Toast).use(Row).use(Col).use(Cell).use(Icon).use(Sticky).use(ActionSheet).use(List).use(Cascader).use(Popup).use(Radio).use(RadioGroup).use(Button).use(Dialog).use(Overlay).use(CellGroup);
  import Tabbar from '../componets/Tabbar';

  import {
    memberConstantsUri,
    memberListsUri,
    regionChildrenUri,
    STATIC_BASE_URL,
    wechatJsApiConfigUri
  } from '../../common/api';
  import util from "../../assets/js/util";

  export default {
    components: {
      [Toast.name]: Toast,
      [Row.name]: Row,
      [Col.name]: Col,
      [Icon.name]: Icon,
      [Sticky.name]: Sticky,
      [ActionSheet.name]: ActionSheet,
      [List.name]: List,
      [Cascader.name]: Cascader,
      [Popup.name]: Popup,
      Tabbar: Tabbar
    },
    data() {
      return {
        STATIC_BASE_URL: STATIC_BASE_URL,
        isWxServiceEnable: isWxServiceEnable,
        showOrderActionsheet: false,
        orderActions: [
          {name: '最新注册', order: 10},
          {name: '最近登录', order: 20},
          {name: '人气最高', order: 30},
          {name: '认证最多', order: 40}
        ],
        showAgeActionsheet: false,
        ageActions: [
          {name: '不限', min: 0, max: 0},
          {name: '18-25岁', min: 18, max: 25},
          {name: '26-30岁', min: 26, max: 30},
          {name: '31-40岁', min: 31, max: 40},
          {name: '41-50岁', min: 41, max: 50},
          {name: '50岁以上', min: 51, max: 0},
        ],
        showRegionPopup: false,
        selectedRegions: '',
        regionPopupShowType: '',
        origSearchForm: {},
        searchForm: {keywords: '', gender: 0, age: 0, order: 10, min_age: 0, max_age: 0, live_province: 0, live_city: 0, liveLocation: '',
          height: 0, height_from: 0, height_to: 0, weight: 0, weight_from: 0, weight_to: 0, marriage_status: 0,
          education: 0, job: -1, job_str: '', annual_income: 0,
          zodiac: -1, kids: 0, constellation: '', house_status: 0, house_location: 0, car_status: 0, birth_province: 0, birth_city: 0},

        provinceList: [],
        cityList: [],

        currentPage: 1,
        lastPage: 0,
        total: 0,
        pageSize: 10,
        loading: false,
        finished: false,
        dataList: [],

        orderStr: '排序',
        ageStr: '年龄',
        locationStr: '所在地',

        subMsgTemplates: '',
        siteConfig: null,
        subMsgWrapperVisible: true,

        searchFormPopupVisible: false,
        genderActions: [],
        marriageStatusActions: [],
        heightActions: [
          {name: '不限', min: 0, max: 0},
          {name: '150-160CM', min: 150, max: 160},
          {name: '161-170CM', min: 161, max: 170},
          {name: '171-180CM', min: 171, max: 180},
          {name: '180CM以上', min: 181, max: 300},
        ],
        weightSheetVisible: false,
        weightActions: [
          {name: '不限', min: 0, max: 0},
          {name: '40-50KG', min: 40, max: 50},
          {name: '51-60KG', min: 51, max: 60},
          {name: '61-70KG', min: 61, max: 70},
          {name: '71-80KG', min: 71, max: 80},
          {name: '80KG以上', min: 81, max: 300},
        ],
        educationTypesSheetVisible: false,
        educationTypesActions: [],
        jobsSheetVisible: false,
        jobsActions: [],
        incomesSheetVisible: false,
        incomesActions: [],
        carStatusSheetVisible: false,
        carStatusActions: [],
        houseStatusActions: [],
        kidsSheetVisible: false,
        kidsActions: [],
        bloodTypesSheetVisible: false,
        bloodTypesActions: [],
        nationsSheetVisible: false,
        nationsActions: [],
        faithsSheetVisible: false,
        faithsActions: [],
        smokesSheetVisible: false,
        smokesActions: [],
        drinksSheetVisible: false,
        drinksActions: [],
        jobTypesVisible: false,
        jobTypesActions: [],
        distanceRelationshipTypesVisible: false,
        distanceRelationshipTypesActions: [],
        childTypesVisible: false,
        childTypesActions: [],
        constellationActions: [],
        zodiacActions: []
      }
    },
    methods: {
      onOrderActionSelect(item) {
        this.orderStr = item.name;
        this.searchForm.order = item.order;
        this.showOrderActionsheet = false;
        this.search();
      },
      onAgeActionSelect(item) {
        this.ageStr = item.name;
        this.searchForm.min_age = item.min;
        this.searchForm.max_age = item.max;
        this.showAgeActionsheet = false;
        this.search();
      },
      onShowRegionPopup(type) {
        this.regionPopupShowType = type;
        this.showRegionPopup = true;
      },
      onRegionCascaderChange(option) {
        const tabIndex = option.tabIndex;
        const value = option.value;
        if(tabIndex == 0) {
          if(value > 0) {
            const provinceList = this.provinceList;
            let provinceIndex = 0;
            for (let i = 0; i < provinceList.length; i++) {
              if(value == provinceList[i].value) {
                provinceIndex = i;
                break;
              }
            }
            this.getRegions(value, (regions) => {
              let children = [];
              children.push({
                text: '不限',
                value: 0
              });
              for (let i = 0; i < regions.length; i++) {
                children.push({
                  text: regions[i].region_name,
                  value: regions[i].region_id
                })
              }
              let province = provinceList[provinceIndex];
              province.children = children;
              this.$set(provinceList, provinceIndex, province);
            })
          } else {
            let children = [];
            children.push({
              text: '不限',
              value: 0
            });
            const provinceList = this.provinceList;
            let provinceIndex = 0;
            let province = provinceList[provinceIndex];
            province.children = children;
            this.$set(provinceList, provinceIndex, province);
          }
        }
      },
      onRegionCascaderFinish({ selectedOptions }) {
        this.searchForm.live_province = selectedOptions[0].value;
        this.searchForm.live_city = selectedOptions[1].value;
        this.showRegionPopup = false;
        this.locationStr = selectedOptions[0].text + '-' + selectedOptions[1].text;
        if(this.regionPopupShowType == '') {
          this.search();
        } else if(this.regionPopupShowType == 'form') {
          this.searchForm.liveLocation = selectedOptions[0].text + '-' + selectedOptions[1].text;
        }
      },
      onJobActionsSelect(item) {
        this.jobsSheetVisible = false;
        this.searchForm.job = item.value;
        this.searchForm.job_str = item.name;
      },
      resetSearchForm() {
        for (let key in this.origSearchForm) {
          this.searchForm[key] = this.origSearchForm[key];
        }
      },
      search() {
        this.currentPage = 1;
        this.lastPage = 0;
        this.total = 0;
        this.loading = false;
        this.finished = false;
        this.dataList = [];
        this.requestData();
        this.searchFormPopupVisible = false;
        window.localStorage.setItem('member_profile_search_params', JSON.stringify(this.searchForm));
      },
      requestData() {
        const that = this;
        this.loading = true;
        this.searchForm.min_age = this.ageActions[this.searchForm.age].min;
        this.searchForm.max_age = this.ageActions[this.searchForm.age].max;
        this.searchForm.height_from = this.heightActions[this.searchForm.height].min;
        this.searchForm.height_to = this.heightActions[this.searchForm.height].max;
        this.searchForm.weight_from = this.weightActions[this.searchForm.weight].min;
        this.searchForm.weight_to = this.weightActions[this.searchForm.weight].max;

        const url = memberListsUri + '?page_size=' + that.pageSize + '&page=' + that.currentPage
          + '&keywords='+encodeURIComponent(this.searchForm.keywords)+'&order=' + this.searchForm.order + '&gender=' + this.searchForm.gender
          + '&min_age=' + this.searchForm.min_age + '&max_age=' + this.searchForm.max_age + '&live_province=' + this.searchForm.live_province
          + '&live_city=' + this.searchForm.live_city + '&height_from=' + this.searchForm.height_from + '&height_to=' + this.searchForm.height_to
          + '&weight_from=' + this.searchForm.weight_from + '&weight_to=' + this.searchForm.weight_to + '&marriage_status=' + this.searchForm.marriage_status
          + '&education=' + this.searchForm.education + '&job=' + this.searchForm.job + '&annual_income=' + this.searchForm.annual_income
          + '&zodiac=' + this.searchForm.zodiac + '&kids=' + this.searchForm.kids + '&constellation=' + this.searchForm.constellation
          + '&house_status=' + this.searchForm.house_status + '&house_location=' + this.searchForm.house_location
          + '&car_status=' + this.searchForm.car_status + '&birth_province=' + this.searchForm.birth_province + '&birth_city=' + this.searchForm.birth_city;
        this.$http.get(url).then(response => {
          let {code, msg, data} = response.body
          if (code != 0) {
            that.toast(msg);
          } else {
            that.loading = false;
            if (that.currentPage >= data.last_page) {
              that.finished = true;
            }
            that.currentPage = that.currentPage + 1;
            for (let i = 0; i < data.data.length; i++) {
              that.dataList.push(data.data[i]);
            }
            that.total = data.total;
            that.lastPage = data.last_page;
          }
        }, response => {
          // error callback
        })
      },
      getRegions(parentId, callback) {
        const that = this;
        const url = regionChildrenUri + '?parent_id=' + parentId;
        this.$http.get(url).then(response => {
          let {code, msg, data} = response.body
          if (code != 0) {
            that.toast(msg);
          } else {
            callback(data.regions);
          }
        }, response => {
          // error callback
        })
      },
      getJsApiConfig() {
        if(!isWxServiceEnable) {
          return;
        }
        const that = this;
        const url = wechatJsApiConfigUri + '?url=' + encodeURIComponent(window.location.href);
        this.$http.get(url).then(response => {
          let {code, msg, data} = response.body
          if (code != 0) {
            that.toast(msg);
          } else {
            wx.config({
              debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
              appId: data.appId, // 必填，公众号的唯一标识
              timestamp: data.timestamp, // 必填，生成签名的时间戳
              nonceStr: data.nonceStr, // 必填，生成签名的随机串
              signature: data.signature,// 必填，签名
              openTagList: ['wx-open-subscribe'],
              jsApiList: ['onMenuShareAppMessage', 'onMenuShareTimeline', 'updateAppMessageShareData', 'updateTimelineShareData'] // 必填，需要使用的JS接口列表
            });

            wx.ready(function () {
              console.log('wx配置成功');
              that.updateShareData();
            });

            wx.error(function (res) {
              console.log('wx配置出错');
            });
          }
        }, response => {
          // error callback
        })
      },
      updateShareData() {
        let desc ='汇集上万名优质单身人士，立即注册，早日找到幸福伴侣';
        const imgUrl = STATIC_BASE_URL + 'images/logo.png';
        const link = window.location.href;

        wx.updateAppMessageShareData({
          title: APP_NAME, // 分享标题
          desc: desc, // 分享描述
          link: link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
          imgUrl: imgUrl, // 分享图标
          success: function () {
            // 设置成功
            console.log('updateAppMessageShareData');
          }
        });

        wx.updateTimelineShareData({
          title: APP_NAME, // 分享标题
          link: link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
          imgUrl: imgUrl, // 分享图标
          success: function () {
            // 设置成功
            console.log('updateTimelineShareData');
          }
        })
      },
      initSubMsgTemplates() {
        if(!isWxServiceEnable) {
          return;
        }
        let templates = [
          this.siteConfig.subscribe_template.marriage_person_notice,
          this.siteConfig.subscribe_template.new_view_notice,
          this.siteConfig.subscribe_template.liked_remind,
          this.siteConfig.subscribe_template.new_msg_remind,
          this.siteConfig.subscribe_template.sign_in_remind,
        ];
        this.subMsgTemplates = templates.join(',');
        this.subMsgWrapperVisible = true;
      },
      subBtnSuccess(e) {
        console.log(e.detail);
        this.subMsgWrapperVisible = false;
      },
      subBtnError(e) {
        console.log(e.detail);
        this.subMsgWrapperVisible = false;
      },
      getConstants() {
        const that = this;
        const url = memberConstantsUri;
        this.$http.get(url).then(response => {
          let {code, msg, data} = response.body
          if (code != 0) {
            that.toast(msg);
          } else {
            let genderActions = [];
            for (let key in data.genders) {
              genderActions.push({
                name: data.genders[key],
                value: key
              })
            }
            that.genderActions = genderActions;

            let marriageStatusActions = [];
            marriageStatusActions.push({
              name: '不限',
              value: 0
            });
            for (let key in data.marriage_status) {
              marriageStatusActions.push({
                name: data.marriage_status[key],
                value: key
              })
            }
            that.marriageStatusActions = marriageStatusActions;

            let educationTypesActions = [];
            educationTypesActions.push({
              name: '不限',
              value: 0
            });
            for (let key in data.education_types) {
              educationTypesActions.push({
                name: data.education_types[key],
                value: key
              })
            }
            that.educationTypesActions = educationTypesActions;

            let jobsActions = [];
            jobsActions.push({
              name: '不限',
              value: 0
            });
            for (let key in data.jobs) {
              jobsActions.push({
                name: data.jobs[key],
                value: key
              })
            }
            that.jobsActions = jobsActions;

            let incomesActions = [];
            incomesActions.push({
              name: '不限',
              value: 0
            });
            for (let key in data.incomes) {
              incomesActions.push({
                name: data.incomes[key],
                value: key
              })
            }
            that.incomesActions = incomesActions;

            let carStatusActions = [];
            for (let key in data.car_status) {
              if(key == 0) {
                data.car_status[key] = '不限';
              }
              carStatusActions.push({
                name: data.car_status[key],
                value: parseInt(key)
              })
            }
            that.carStatusActions = carStatusActions;

            let houseStatusActions = [];
            for (let key in data.house_status) {
              if(key == 0) {
                data.house_status[key] = '不限';
              }
              houseStatusActions.push({
                name: data.house_status[key],
                value: parseInt(key)
              })
            }
            that.houseStatusActions = houseStatusActions;

            let kidsActions = [];
            kidsActions.push({
              name: '不限',
              value: 0
            });
            for (let key in data.kids) {
              kidsActions.push({
                name: data.kids[key],
                value: key
              })
            }
            that.kidsActions = kidsActions;

            let constellationActions = [];
            constellationActions.push({
              name: '不限',
              value: ''
            });
            for (let key in data.constellations) {
              constellationActions.push({
                name: data.constellations[key],
                value: key
              })
            }
            that.constellationActions = constellationActions;

            let zodiacActions = [];
            zodiacActions.push({
              name: '不限',
              value: -1
            });
            for (let key in data.zodiacs) {
              zodiacActions.push({
                name: data.zodiacs[key],
                value: key
              })
            }
            that.zodiacActions = zodiacActions;

            let bloodTypesActions = [];
            for (let key in data.blood_types) {
              bloodTypesActions.push({
                name: data.blood_types[key],
                value: key
              })
            }
            that.bloodTypesActions = bloodTypesActions;

            let nationsActions = [];
            for (let key in data.nations) {
              nationsActions.push({
                name: data.nations[key],
                value: key
              })
            }
            that.nationsActions = nationsActions;

            let faithsActions = [];
            for (let key in data.faiths) {
              faithsActions.push({
                name: data.faiths[key],
                value: key
              })
            }
            that.faithsActions = faithsActions;

            let smokesActions = [];
            for (let key in data.smokes) {
              smokesActions.push({
                name: data.smokes[key],
                value: key
              })
            }
            that.smokesActions = smokesActions;

            let drinksActions = [];
            for (let key in data.drinks) {
              drinksActions.push({
                name: data.drinks[key],
                value: key
              })
            }
            that.drinksActions = drinksActions;

            let jobTypesActions = [];
            for (let key in data.job_types) {
              jobTypesActions.push({
                name: data.job_types[key],
                value: key
              })
            }
            that.jobTypesActions = jobTypesActions;

            let distanceRelationshipTypesActions = [];
            for (let key in data.distance_relationship_types) {
              distanceRelationshipTypesActions.push({
                name: data.distance_relationship_types[key],
                value: key
              })
            }
            that.distanceRelationshipTypesActions = distanceRelationshipTypesActions;

            let childTypesActions = [];
            for (let key in data.child_types) {
              childTypesActions.push({
                name: data.child_types[key],
                value: key
              })
            }
            that.childTypesActions = childTypesActions;

            let liveParentsTypesActions = [];
            for (let key in data.live_parents_types) {
              liveParentsTypesActions.push({
                name: data.live_parents_types[key],
                value: key
              })
            }
            that.liveParentsTypesActions = liveParentsTypesActions;
          }
        }, response => {
          // error callback
        })
      }
    },
    beforeRouteEnter(to, from, next) {
      if(from.name === 'MemberProfile') { //判断是从哪个路由过来的，若是detail页面不需要刷新获取新数据，直接用之前缓存的数据即可
        to.meta.isBack = true;
      }
      next();
    },
    created() {
      const fromuid = window.localStorage.getItem('user_id') ? window.localStorage.getItem('user_id') : 0;
      let _href = window.location.href;
      if (isWxServiceEnable && _href.indexOf('replace=1') <= -1) {
        window.location.replace(_href + (_href.indexOf('?') == -1 ? '?' : '&') + 'replace=1&fromuid=' + fromuid)
      } else if (_href.indexOf('fromuid=') > -1) {
        const fromuidVar = util.getQueryVariable('fromuid');
        if(fromuid > 0 && fromuid != fromuidVar) {
          window.location.replace(_href.replace('fromuid=' + fromuidVar, 'fromuid=' + fromuid));
        }
      }
      this.isFirstEnter = true;
      // 只有第一次进入或者刷新页面后才会执行此钩子函数，使用keep-alive后（2+次）进入不会再执行此钩子函数
    },
    activated() {
      if(isWxServiceEnable) {
        if(!this.$route.meta.isBack || this.isFirstEnter){
          // 如果isBack是false，表明需要获取新数据，否则就不再请求，直接使用缓存的数据
          // 如果isFirstEnter是true，表明是第一次进入此页面或用户刷新了页面，需获取新数据
          // 把数据清空，可以稍微避免让用户看到之前缓存的数据
          // this.currentPage = 1;
          // this.lastPage = 0;
          // this.total = 0;
          // this.loading = false;
          // this.finished = false;
          // this.dataList = [];
          // this.requestData();
        }
        // 恢复成默认的false，避免isBack一直是true，导致下次无法获取数据
        this.$route.meta.isBack = false;
        // 恢复成默认的false，避免isBack一直是true，导致每次都获取新数据
        this.isFirstEnter = false;
      }
    },
    mounted: function () {
      // if(!this.GLOBAL.userInfo) {
      //   this.$router.push({name: 'UserLogin'});
      //   return;
      // }
      if(this.GLOBAL.siteConfig) {
        this.siteConfig = this.GLOBAL.siteConfig;
        this.initSubMsgTemplates();
      }
      this.EventBus.$on('OnSiteConfigLoaded', () => {
        this.siteConfig = this.GLOBAL.siteConfig;
        this.initSubMsgTemplates();
      });
      for (let key in this.searchForm) {
        this.origSearchForm[key] = this.searchForm[key];
      }
      const memberProfileSearchParams = JSON.parse(window.localStorage.getItem('member_profile_search_params'));
      if(memberProfileSearchParams) {
        for (let key in memberProfileSearchParams) {
          this.searchForm[key] = memberProfileSearchParams[key];
        }
      }
      this.getJsApiConfig();
      this.getConstants();
      this.getRegions(1, (regions) => {
        let provinceList = [];
        provinceList.push({
          text: '不限',
          value: 0,
          children: []
        });
        for (let i = 0; i < regions.length; i++) {
          provinceList.push({
            text: regions[i].region_name,
            value: regions[i].region_id,
            children: []
          })
        }
        this.provinceList = provinceList;
      })
    }
  }
</script>

<style scoped>
  .nav-wrapper {
    background: #6600CC;
    color: #FFFFFF;
    padding: 15px 0;
    font-size: 14px;
  }
  .nav-wrapper .current {
    font-size: 18px;
    font-weight: bold;
  }

  .member-list a{
    color: #666666;
    text-decoration: none;
  }
  .member-item {
    margin-left: 3%;
    margin-right: 3%;
    width: 44%;
    border-radius: 6px;
    background: #ffffff;
    margin-bottom: 10px;
    float: left;
  }
  /*.member-item:nth-child(even) {*/
  /*  margin-left: 3%;*/
  /*}*/
  /*.member-item:nth-child(odd) {*/
  /*  margin-right: 3%;*/
  /*}*/
  .member-photo {
    position: relative;
    width: 100%;
    height: 0rem;
    padding-bottom: 123%;
  }
  .member-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
  }
  .member-photo h3 {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    color: #ffffff;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    position: absolute;
    padding: 0 10px;
  }
  .member-info {
    padding: 0 0;
    margin: 0 0;
    height: 50px;
  }
  .member-info p {
    font-size: 12px;
    padding: 5px 0;
    margin: 0 0 ;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  .search-form-popup {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background-color: rgba(0, 0, 0, 0.6);
  }
  .search-form-box {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 80%;
    padding-bottom: env(safe-area-inset-bottom);
  }
  .search-form-box .search-input {
    padding: 5px 5px;
    font-size: 12px;
    background: #f2f2f2;
    border: none;
    width: 90%;
  }
  .search-form-box .search-form-field-header {
    padding: 10px 10px;
    font-size: 12px;
    color: #222;
  }
</style>
